import { FC } from "react"
import { Item } from "./index"
import "./todolist.css"
//声明props类型

type Iprops = {
    data: Array<Item> | undefined
    onDel(id: string): void
    onCheckIn: (checked: boolean, id: string) => void
}

const Todolist: FC<Iprops> = (props) => {
    //解构传递下来的数据
    let { data, onDel, onCheckIn } = props;
    //checkbox勾选变化
    let handleCheckboxChange = (e: any, id: string) => {
        // console.log(e.target.checked)
        onCheckIn(e.target.checked, id)
    }
    //创建列表数据
    let lis = data!.map((item: Item) => {
        return (
            <li className={item.completed ? "completed" : ""} key={item.id}>
                <input type="checkbox" checked={item.completed} onChange={(e: any) => {
                    handleCheckboxChange(e, item.id)
                }} />
                -----
                <b>{item.todo}</b>
                -----
                <button onClick={() => {
                    onDel(item.id)
                }}>删除</button>
            </li>
        )
    })

    return (
        <fieldset>
            <legend>列表</legend>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}

export default Todolist